import {Component, OnInit} from 'angular2/core';
import {RouteParams, ROUTER_DIRECTIVES, RouteConfig, Router} from 'angular2/router';
import {HeroService, Hero} from './hero.service';

@Component({
  templateUrl: './app/hero/views/index.html',
  providers: [HeroService],
  directives: [ ROUTER_DIRECTIVES ],
  styleUrls: ['./app/hero/views/styles.css']
})

export class HeroComponent implements OnInit {

  private heroes: Hero[];

  private _selectedId: number;

  constructor(
    private _service: HeroService,
    private _router: Router,
    routeParams: RouteParams) {
    this._selectedId = +routeParams.get('id');
  }

  isSelected(hero: Hero) { return hero.id === this._selectedId; }

  onSelect(hero: Hero) {
    this._router.navigate(['HeroDetail', { id: hero.id }]);
  }

  ngOnInit() {
    this._service.getHeroes().then(heroes => this.heroes = heroes);
  }
}